<style scoped>
.layout {
  border       : 1px solid #d7dde4;
  background   : #f5f7f9;
  position     : relative;
  border-radius: 4px;
  overflow     : hidden;
}
.layout-logo {
  width        : 100px;
  height       : 30px;
  background   : #5b6270;
  border-radius: 3px;
  float        : left;
  position     : relative;
  top          : 15px;
  left         : 20px;
}
.layout-nav {
  width       : 420px;
  margin      : 0 auto;
  margin-right: 20px;
}
.layout-footer-center {
  text-align: center;
}
</style>
<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo"></div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                        <Icon type="ios-navigate"></Icon>
                        个人中心
                  </MenuItem>
                        <MenuItem name="2">
                        <Icon type="ios-keypad"></Icon>
                        登录/注册
                   </MenuItem>
                        <MenuItem name="3">
                        <Icon type="ios-analytics"></Icon>
                        退出登录
                  </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Layout :style="{padding: '0 50px'}">
                <Breadcrumb :style="{margin: '16px 0'}">
                    <BreadcrumbItem>首页</BreadcrumbItem>
                    <BreadcrumbItem>组件</BreadcrumbItem>
                    <BreadcrumbItem>布局</BreadcrumbItem>
                </Breadcrumb>
                <Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
                    <Layout>
                        <Sider hide-trigger :style="{background: '#fff'}">
                            <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                                <Submenu name="1">
                                    <template slot="title">
                                        <Icon type="ios-navigate"></Icon>
                                        用户相关信息
                                    </template>
                                    <MenuItem name="1-1" to='/user'>
                                    <router-link to='/user'>用户模块</router-link>
                                   </MenuItem>
                                    <MenuItem name="1-2" to='/news'>
                                    <router-link to='/news'>新闻管理</router-link>
                                   </MenuItem>
                                    <MenuItem name="1-3" to='/cate'>
                                    <router-link to='/cate'>分类模块</router-link>
                                 </MenuItem>
                                </Submenu>
                                <Submenu name="2">
                                    <template slot="title">
                                        <Icon type="ios-keypad"></Icon>
                                        货物管理模块
                                    </template>
                                    <MenuItem name="2-1" to='/product'>
                                    <router-link to='/product'>产品管理</router-link>
                                   </MenuItem>
                                    <MenuItem name="2-2" to='/stock'>
                                    <router-link to='/stock'>库存管理</router-link>
                              </MenuItem>
                                    <MenuItem name="2-3" to='/cart'>
                                    <router-link to='/cart'>购物车管理</router-link>
                                   </MenuItem>
                                </Submenu>
                                <Submenu name="3">
                                    <template slot="title">
                                        <Icon type="ios-analytics"></Icon>
                                        售后管理模块
                                    </template>
                                    <MenuItem name="3-1" to='/order'>
                                    <router-link to='/order'>订单管理</router-link>
                                </MenuItem>
                                    <MenuItem name="3-2" to='/help'>
                                    <router-link to='/help'>帮助模块</router-link>
                                </MenuItem>
                                </Submenu>
                            </Menu>
                        </Sider>
                        <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                            <router-view></router-view>
                        </Content>
                    </Layout>
                </Content>
            </Layout>
            <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
        </Layout>
      </div>
       </div>
</template>
<script>
export default {};
</script>

